export class show_model {
	constructor(option = {}) {
		this.bodyModel = null;
		this.cancelModel = null;
		this.confirmModel = null;
		this.pageHeight = uni.getSystemInfoSync().screenHeight;
		this.pageWidth = uni.getSystemInfoSync().screenWidth;
		
		let opacity = option.opacity || 0.6;

		let model_tit = option.title || '温馨提示';
		let model_content = option.content || "内容"
		let clickEvent = option.IsclickEvent || false;
		let cancelVal = option.cancelVal || '取消';
		let confirmVal = option.confirmVal || '确认';
		let cancelColor = option.cancelColor || '#999'; // 取消
		let confirmColor = option.confirmColor || '#6F69E9'; // 确认
		let delCancel = option.delCancel || false;
		let align = option.align || "center";
		let fn = () => {};
		this.$event = option.$event || fn;
		let backOff = option.backOff || false;

		//#ifdef APP-PLUS
		this.creatView({
			height: `${this.pageHeight}px`,
			top: 0
		}, opacity, clickEvent, {
			'tit': model_tit,
			'content': model_content,
			cancelVal,
			confirmVal,
			confirmColor,
			cancelColor,
			delCancel,
			align
		})
		if (!backOff) {
			this.backbtn();
		}
		//#endif
	}
	backbtn() {
		let that = this;
		plus.key.addEventListener('backbutton', function(e) {
			that.hide();
		}, false)
	}
	//生成提示框view
	creatView(style, opa, clickEvent, modelInfo) {
		style = {
			left: '0px',
			width: '100%',
			...style
		}
		let platform = plus.os.name.toLowerCase();
		let view = new plus.nativeObj.View('showModalView', style);

		let width = 300;
		let height = 150;
		let titleHeight = 30;
		let contentHeight = 60;
		let startTop = (this.pageHeight - height) / 2;
		let startLeft = (this.pageWidth - width) / 2;
		let titleTop = startTop + 10;
		let contentTop = titleTop + 30;
		let lineTop = startTop + height - 40;
		let buttonHeight = 40;
		let halfWidth = width / 2;
		let halfWidthForGlobal = startLeft + halfWidth;

		if (platform == "ios") {
			view.draw([{
					tag: 'rect',
					id: 'modal',
					color: `rgba(0,0,0,${opa})`,
					position: {
						top: '0px',
						left: '0px',
						width: '100%',
						height: '100%'
					}
				},
				{
					tag: 'rect',
					id: 'content',
					rectStyles: {
						borderWidth: '2px',
						radius: '8px',
						color: `#fff`,
						backgroundColor: '#fff'
					},
					position: {
						top: startTop + 'px',
						left: (startLeft - 10) + 'px',
						width: (width + 20) + 'px',
						height: height + 'px'
					}
				},
				{
					tag: 'font',
					id: 'title',
					text: modelInfo.tit,
					textStyles: {
						size: '16px',
						color: '#333'
					},
					position: {
						top: titleTop + 'px',
						left: startLeft + 'px',
						width: width + 'px',
						height: titleHeight + 'px'
					}
				},
				{
					tag: 'font',
					id: 'text',
					text: modelInfo.content,
					textStyles: {
						size: '14px',
						color: '#333',
						whiteSpace: 'normal',
						align: modelInfo.align
					},
					position: {
						top: contentTop + 'px',
						left: startLeft + 'px',
						width: width + 'px',
						height: contentHeight + 'px'
					}
				},
				{
					tag: 'rect',
					id: 'line',
					color: '#eaebec',
					position: {
						top: lineTop + 'px',
						left: startLeft + 'px',
						width: width + 'px',
						height: '0.5px'
					}
				},
				{
					tag: 'rect',
					id: 'line2',
					color: '#eaebec',
					position: {
						top: lineTop + 'px',
						left: +halfWidthForGlobal + 'px',
						width: modelInfo.delCancel ? '0px' : '0.5px',
						height: modelInfo.delCancel ? '0px' : buttonHeight + 'px'
					}
				}
			]);
		} else {
			view.draw([{
					tag: 'rect',
					id: 'modal',
					color: `rgba(0,0,0,${opa})`,
					position: {
						top: '0px',
						left: '0px',
						width: '100%',
						height: '100%'
					}
				},
				{
					tag: 'rect',
					id: 'content',
					rectStyles: {
						borderWidth: '2px',
						radius: '8px',
						color: `#fff`,
						backgroundColor: '#fff',
						padding: "10px"
					},
					position: {
						top: startTop + 'px',
						left: (startLeft - 10) + 'px',
						width: (width + 20) + 'px',
						height: height + 'px'
					}
				},
				{
					tag: 'font',
					id: 'title',
					text: modelInfo.tit,
					textStyles: {
						size: '16px',
						color: '#333'
					},
					position: {
						top: titleTop + 'px',
						left: startLeft + 'px',
						width: width + 'px',
						height: titleHeight + 'px'
					}
				},
				{
					tag: 'font',
					id: 'text',
					text: modelInfo.content,
					textStyles: {
						size: '14px',
						color: '#333',
						whiteSpace: 'normal',
						align: modelInfo.align
					},
					position: {
						top: contentTop + 'px',
						left: startLeft + 'px',
						width: width + 'px',
						height: contentHeight + 'px'
					}
				},
				{
					tag: 'rect',
					id: 'line',
					color: '#eaebec',
					position: {
						top: lineTop + 'px',
						left: startLeft + 'px',
						width: width + 'px',
						height: '0.5px'
					}
				},
				{
					tag: 'rect',
					id: 'line2',
					color: '#eaebec',
					position: {
						top: lineTop + 'px',
						left: halfWidthForGlobal + 'px',
						width: modelInfo.delCancel ? '0px' : '0.5px',
						height: modelInfo.delCancel ? '0px' : buttonHeight + 'px'
					}
				}
			]);
		}

		var num = 0.55;
		if (platform == "ios") {
			num = 0.57
		}
		if (!modelInfo.delCancel) {
			// 取消   
			let viewCancel = new plus.nativeObj.View('cancel', {
				width: halfWidth + 'px',
				height: buttonHeight + 'px',
				top: lineTop + 'px',
				left: startLeft + 'px',
				backgroundColor: 'rgba(255,255,255,0)'
			});
			viewCancel.draw([{
				tag: 'font',
				id: 'cancel',
				text: modelInfo.cancelVal,
				textStyles: {
					color: modelInfo.cancelColor,
					size: '14px'
				}
			}]);

			viewCancel.addEventListener("click", (e) => {
				this.$event({
					res: false,
					types: 'cancel'
				});
				this.hide();
			}, false);
			this.cancelModel = viewCancel;
		}
		// 确认
		let viewconfirm = new plus.nativeObj.View('confirm', {
			width: modelInfo.delCancel ? width + 'px' : '40%',
			height: buttonHeight + 'px',
			top: lineTop + 'px',
			left: modelInfo.delCancel ? startLeft + 'px' : halfWidthForGlobal + 'px',
			backgroundColor: 'rgba(255,255,255,0)',
		}, );
		viewconfirm.draw([{
			tag: 'font',
			id: 'confirm',
			text: modelInfo.confirmVal,
			textStyles: {
				color: modelInfo.confirmColor,
				size: '14px'
			}
		}, ]);

		viewconfirm.addEventListener("click", (e) => {
			this.$event({
				res: true,
				types: 'confirm'
			});
			this.hide();
		}, false);
		//点击蒙布
		if (clickEvent) {
			view.addEventListener("click", (e) => {
				this.$event({
					res: false,
					types: 'cover'
				});
				this.hide();
			}, false);
		}
		this.bodyModel = view;
		this.confirmModel = viewconfirm;
	}
	showModalAnimationClose() {
		var options = {
			type: 'pop-out',
			duration: 300
		};
		plus.nativeObj.View.startAnimation(options, {
			view: this.bodyModel
		}, {
			view: this.cancelModel
		}, {
			view: this.viewconfirm
		}, function() {
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	showModalAnimationOpen() {
		var options = {
			type: 'pop-in',
			duration: 1000
		};

		plus.nativeObj.View.startAnimation(options, {
			view: this.bodyModel
		}, {
			view: this.cancelModel
		}, {
			view: this.viewconfirm
		}, function() {
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	show() {
		this.showModalAnimationOpen();
		this.bodyModel.show();
		if (this.cancelModel) {
			this.cancelModel.show();
		}
		this.confirmModel.show();

	}
	hide() {
		this.showModalAnimationClose();
		this.bodyModel.hide();
		if (this.cancelModel) {
			this.cancelModel.hide();
		}
		this.confirmModel.hide();
	}
}

export default show_model